<template>
	<div class="live_index">
		<div class="title_bar">
			<p>生活指数</p>
			<button class="scroll_left" @click="scrollLeft"></button>
			<button class="scroll_right" @click="scrollRight"></button>
		</div>
		<div class="info_container" ref="info_container">
			<ul class="page">
				<li class="each_info" v-for="(item,index) in dailyIndex" :key="index">
					<div class="scroll_view">
						<div class="p1">
							<div class="info_icon" :style="'background-position:'+ InfoIconPositions[index]"></div>
							<div class="info_text">{{item.name}}</div>
							<div class="info_category">{{item.category}}</div>
						</div>
						<div class="p2">
							<div class="info_detail">{{item.text}}</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data: function () {
			return {
				id: "",
				dailyIndex: [],
				InfoIconPositions: [
					'-38px -44px', // 运动
					'-154px -112px', // 洗车
					'-73px -118px', // 穿衣
					'-154px -74px', // 钓鱼
					'-117px -37px', // 紫外线
					'-117px -74px', // 旅游
					'-117px 0px', // 舒适度
					'-74px -155px', // 感冒
					'-157px 0px', // 空气污染
					'-74px -83px', // 晾晒
					'-154px -38px', // 交通
					'0px -153px' // 防晒
				]
			}
		},
		methods: {
			scrollLeft: function() {
				this.$refs.info_container.setAttribute("style","left: 0px;");
			},
			scrollRight: function() {
				this.$refs.info_container.setAttribute("style","left: -430px;");
			}
		},
		computed: {
			city_id() {
				return this.$store.state.cityId;
			}
		},
		watch: {
			// 监测city_id数据变化，变化时请求数据
			city_id (nowId){
				let url = 'https://devapi.heweather.net/v7/indices/1d?key=4f1744b1ba5b47ab8b0a893374efa8ca&type=0&location=' + nowId;
				this.$axios
					.get(url)
					.then(res => {
						// 由于请求来的生活指数参数是乱序的，为了保证显示时的顺序，使用sort方法对数据进行了排序
						this.dailyIndex = res.data.daily.sort((a,b) => {return a.type - b.type});
						function myFilter(a){
							return a.type != 7&&a.type != 11&&a.type != 12&&a.type != 13
						}
						this.dailyIndex = this.dailyIndex.filter(myFilter)
					})
			}
		}
	}
</script>

<style lang="less">
	.live_index {
		position: relative;
		float: left;
		width: 1200 - 740 - 40px; 
		height: 520px;
		margin: 40px 0 0 30px;
		padding-left: 10px;
		overflow: hidden;
		.title_bar {
			position: relative;
			margin: 13px 0 16px 0;
			p {
				font-size: 18px;
				color: #333;
			}
			a {
				line-height: 18px;
				margin-left: 10px;
				font-size: 11px;
				color: #aaa;
			}
			button {
				position: absolute;
				top: 0px;
				width: 24px;
				height: 24px;
				border: none;
				background-color: transparent;
				background-image: url(../../public/sprite.png);
				cursor: pointer;
				outline: none;
			}
			.scroll_left {
				right: 30px;
				background-position: -135px -154px;
			}
			.scroll_left:hover {
				background-position: -160px -154px;
			}
			.scroll_right {
				right: 0px;
				background-position: -190px 0px;
			}
			.scroll_right:hover {
				background-position: -190px -25px;
			}
		}
		.info_container {
			position: absolute;
			left: 0;
			display: flex;
			width: 200%;
			justify-content: space-between;
			transition: all 1s;
			.page {
				display: flex;
				width: 100%;
				justify-content: space-around;
				flex-wrap: wrap;
				.each_info {
					position: relative;
					width: 190px;
					height: 140px;
					border-radius: 10px;
					// margin: 0 8px 20px 8px;
					margin-bottom: 20px;
					background-color: #fff;
					text-align: center;
					overflow: hidden;
					box-shadow: 0px 0px 15px rgba(0,0,0,.1);
					.scroll_view {
						position: absolute;
						top: 0;
						height: 200%;
						width: 100%;
						transition: all 0.5s;
						.p1 {
							height: 50%;
							font-size: 14px;
							.info_icon {
								display: inline-block;
								width: 34px;
								height: 34px;
								margin-top: 36px;
								border: 0px;
								background-image: url(../../public/sprite.png);
								background-position: -80px -38px;
							}
							.info_text {
								margin: 10px 0 5px 0;
								color: #555;
							}
						}
						.p2 {
							height: 50%;
							display: flex;
							align-items: center;
							// align-content: center;
							.info_detail {
								height: auto;
								padding: 0 20px;
								text-align: left;
								font-size: 14px;
								color: #555;
							}
						}
					}
					.scroll_view:hover {
						top: -100%;
					}
				}
			}
		}
	}
</style>
